import React from "react";
import cn from "classnames";
import _get from 'lodash/get';
import { isPhone } from 'utils/comm';
import styles from "./index.less";
// import G6Editor from "@antv/g6-editor";
const Tooltip = require('../../../g6/plugins/tool.tooltip/');
const G6Editor = require('../../../g6-editor/src')

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.pageContainer = React.createRef();
  }

  componentDidMount() {
    const { editor, flowRecords } = this.props;
    const createPage = this.getCreatePage();
    const page = createPage(this.pageContainer.current);
    const graph = page.getGraph();

    graph.node({
      tooltip(model) {
        const record = flowRecords?.filter(flowRecord => flowRecord.activityId === model.model.properties.overrideid) || [];
        let operator = "";
        let taskNodeTime= "";
        if (record.length > 0){
          if (record[0].multiInstance && record[0].children?.length > 0){
            record[0].children.filter(s => s.taskStatus === "DONE").forEach(s => {
              if (!operator){
                // eslint-disable-next-line prefer-destructuring
                operator = s.operator;
              }else {
                // eslint-disable-next-line no-useless-concat
                operator = `${operator}<br>` + `<span style="color: white">响应人:</span>${s.operator}`;
              }
              if (!taskNodeTime){
                if (!s.taskNodeTime){
                  // eslint-disable-next-line prefer-destructuring
                  taskNodeTime = record[0].taskNodeTime;
                }else {
                  // eslint-disable-next-line prefer-destructuring
                  taskNodeTime = s.taskNodeTime;
                }
              }else {
                let childTime = s.taskNodeTime;
                if (!s.taskNodeTime){
                  childTime = record[0].taskNodeTime;
                }
                // eslint-disable-next-line no-useless-concat
                taskNodeTime = `${taskNodeTime}<br>` + `<span style="color: white">响应时间:</span>${childTime}`;
              }
            })
          }else {
            operator = record[0].operator ? record[0].operator : "";
            taskNodeTime = record[0].taskNodeTime ? record[0].taskNodeTime : "";
          }
        }
        return record.length > 0 ?
          {
            list: [
              ['名称', model.label],
              ['编码', model.model.properties.overrideid],
              ['响应人', operator],
              ['响应时间', taskNodeTime],
            ],
          } : {
            list: [
              ['名称', model.label],
            ],
          };
      },
    });
    editor.add(page);
    this.catchPhoneEvent();
  }


  getCreatePage() {
    const { createPage } = this.props;
    return createPage || this.createPage;
  }

  catchPhoneEvent() {
    if (isPhone() && this.pageContainer.current) {
      const canvas = this.pageContainer.current.querySelector('canvas');
      // Set up touch events for mobile, etc
      canvas.addEventListener("touchstart", (e) => {
        // const mousePos = getTouchPos(canvas, e);
        const touch = e.touches[0];
        const mouseEvent = new MouseEvent("mousedown", {
          clientX: touch.clientX,
          clientY: touch.clientY,
        });
        canvas.dispatchEvent(mouseEvent);
      }, false);
      canvas.addEventListener("touchend", () => {
        const mouseEvent = new MouseEvent("mouseup", { });
        canvas.dispatchEvent(mouseEvent);
      }, false);
      canvas.addEventListener("touchmove", (e) => {
        const touch = e.touches[0];
        const mouseEvent = new MouseEvent("mousemove", {
          clientX: touch.clientX,
          clientY: touch.clientY,
        });
        canvas.dispatchEvent(mouseEvent);
      }, false);

      /*
      // Get the position of a touch relative to the canvas
      const getTouchPos = (canvasDom, touchEvent) => {
        const rect = canvasDom.getBoundingClientRect();
        return {
          x: touchEvent.touches[0].clientX - rect.left,
          y: touchEvent.touches[0].clientY - rect.top
        };
      }
      */
    }
  }

  // eslint-disable-next-line
  createPage(container) {
    // eslint-disable-next-line new-cap
    const tooltip = new Tooltip();
    return new G6Editor.Flow({
      graph: {
        container,
        fitView: 'cc',
        fitViewPadding: 20,
        modes: {
          editchart: ["wheelChangeViewport", "panBlank", "clickEdgeSelected", "clickNodeSelected", "clickCanvasSelected", "clickGroupSelected"],
          viewchart: ['panBlank', 'zoomCanvas'],
        },
        mode: 'default',
        plugins: [tooltip],
        // height,
      },
      align: {
        grid: true,
        item: 'center',
      },
      grid: {
        type: 'line', // 网格类型
        cell: 20,
        forceAlign: true,
        line: {
          stroke: _get(window, 'FLOW_THEME.borderColor', '#f0f4f7'),
          lineWidth: 0,
          lineDash: [4, 4],
          opacity: 0.5,
        },
      },
      noEndEdge: false, // 是否支持悬空边
      edgeResizeable: false,
    });
  }

  render() {
    const { style = {} } = this.props;
    return <div className={cn(styles.flowchart_page, "page")} style={style} ref={this.pageContainer} />;
  }
}
export default Page;
